<template>
  <div>
    <el-dialog
      title="新增子节点"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
          ref="myForm"
        >
          <el-form-item
            label="名称"
            prop="tagName"
            :rules="[
              {
                required: true,
                message: '名称不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="formLabelAlign.tagName"></el-input>
          </el-form-item>
          <el-form-item
            label="code值"
            prop="tagCode"
            :rules="[
              {
                required: true,
                message: 'code值为英文和数字',
                trigger: 'blur',
              },
              { validator: validateCode, trigger: 'blur' },
            ]"
          >
            <el-input v-model="formLabelAlign.tagCode"></el-input>
          </el-form-item>
          <el-form-item
            label="排序"
            prop="tagSort"
            :rules="[
              {
                required: true,
                message: '排序值不能为空',
                trigger: 'blur',
              },
              { validator: validateSort, trigger: 'blur' },
            ]"
          >
            <el-input v-model="formLabelAlign.tagSort"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitTagDefine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import { tagDefineEdit } from "@/api/bianqian/tagApi";
import store from "@/store";
export default {
  data() {
    return {
      dialogVisible: false,
      labelPosition: "right",
      formLabelAlign: {
        tagName: "",
        tagCode: "",
        tagSort: "",
      },
      tagType: "",
      tabName: "A",
      dataRow: null,
    };
  },
  methods: {
    init(type, data, tabName) {
      console.log(data, tabName, "tabName");
      this.clear();
      this.dialogVisible = true;
      this.tagType = type;
      this.dataRow = data;
      this.tabName = tabName;
    },
    // code值
    validateCode(rule, value, callback) {
      if (!/^[a-zA-Z0-9]*$/.test(value)) {
        callback(new Error("请输入正确的code值"));
      } else {
        // 校验通过时手动调用callback()来清除错误提示
        callback();
      }
    },
    validateName(rule, value, callback) {
      if (!/^[\u4e00-\u9fa5]*$/.test(value)) {
        callback(new Error("请输入正确的名称"));
      } else {
        callback();
      }
    },
    validateSort(rule, value, callback) {
      if (!/^[0-9]*$/.test(value)) {
        callback(new Error("请输入正确的排序值"));
      } else {
        callback();
      }
    },
    onSubmitTagDefine() {
      if (this.tagType === 2) {
        const params = {
          parentId: this.dataRow.id, //动态传参或者是a或者是
          tagGroupId: this.tabName,
          // parentId:this.tabName,
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          tagName: this.formLabelAlign.tagName,
          tagSort: this.formLabelAlign.tagSort,
          tagCode: this.formLabelAlign.tagCode,
          tagType: "2",
          tagStatue: "0",
        };
        tagDefineEdit(params)
          .then((result) => {
            if (result.result === true) {
              this.dialogVisible = false;
              this.$emit("initData");
            } else {
              this.$message.error(result.resultdata);
              this.dialogVisible = false;
            }
          })
          .catch((error) => {
            this.dialogVisible = false;
          });
      }
    },
    handleClose() {
      const form = this.$refs.myForm;

      // 确保form实例存在并调用resetFields方法
      if (form && typeof form.resetFields === "function") {
        form.resetFields();
      }
      this.dialogVisible = false;
    },
    clear() {
      this.formLabelAlign.tagName = "";
      this.formLabelAlign.tagCode = "";
      this.formLabelAlign.tagSort = "";
    },
  },
};
</script>
  
  <style scoped>
::v-deep .el-dialog {
  margin-top: 15vh !important;
}
</style>